<template>
  <div class="swiper-wrap">
    <swiper :options="swiperOption" v-if="showSwiper">
      <swiper-slide v-for="(item,index) of swiperList" :key="index">
        <img :src="item" alt="" class="banner-img">
      </swiper-slide>
      <ul class="swiper-pagination" slot="pagination">
      </ul>
    </swiper>
  </div>
</template>
<script>
export default {
  name: 'HomeSwiper',
  data () {
    return {
      swiperOption: {
        loop: true,
        autoplay: {
          autoplay: true,
          delay: 3000,
          disableOnInteraction: false
        },
        touchRatio: 0.5,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          type: 'custom',
          renderCustom: function (swiper, current, total) {
            let textList = ['货运车', '网约车', '私家车']
            var _html = ''
            for (var i = 0; i < total; i++) {
              if (current === i + 1) {
                _html += '<li class="my-custom my-custom-active">' + textList[i] + '</li>'
              } else {
                _html += '<li class="my-custom">' + textList[i] + '</li>'
              }
            }
            return _html // 返回所有的页码html
          }
        }
      },
      swiperList: [
        require('@/assets/img/index/banner-1.jpg'),
        require('@/assets/img/index/banner-2.jpg'),
        require('@/assets/img/index/banner-3.jpg')]
    }
  },
  computed: {
    showSwiper () {
      return this.swiperList.length
    }
  }
}
</script>

<style lang="scss" scoped>
.swiper-slide{
  img{
    width: 750px;
    height: 400px;
  }
}
</style>
<style>
 .swiper-pagination{
      overflow: hidden;
      /* width: 240px; */
      margin: 0 auto;
      margin-left: 380px;
    }
   .my-custom{
        float:left;
        width: 100px;
        height: 36px;
        font-size: 20px;
        background-color: rgba(0, 0, 0, 0.6);
        border-radius: 30px;
        color:#fff;
        line-height: 36px;
        margin-right: 20px;
      }
      .my-custom-active{
        background-color: rgba(248, 115, 114, 0.6);
      }
</style>
